<template>
  <div class="contents">
    <el-table
      ref="shopListTable"
      :data="tableData"
      border
      v-loading="loadingDialig"
      tooltip-effect="dark"
      style="width: 100%"
      :row-key="getRowKeys"
      @expand-change="changExpand"
    >
      <el-table-column width="55" :reserve-selection="true">
        <template slot="header" slot-scope="scope">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleSelectionChange"
          ></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            :indeterminate="scope.row.secondsIsIndeterminate"
            v-model="scope.row.check"
            @change="handRow(scope.row, scope.$index, $event)"
            :disabled="scope.row.disabled"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scopes">
          <el-table
            ref="multipleTable"
            :data="scopes.row.spu_list"
            border
            tooltip-effect="dark"
            style="width: calc(100% - 20px); margin: 2px 10px"
          >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.check"
                  @change="handRow2(scope.row, scope.$index, $event)"
                  :disabled="scope.row.disabled"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              label="商品规格"
              align="center"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{
                scope.row.spu_name.title
              }}</template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">{{
                scope.row.spu_unit.title
              }}</template>
            </el-table-column>
            <el-table-column
              prop="purchase_price"
              label="最近一次采购价"
              show-overflow-tooltip
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="market_price"
              label="市场价"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column width="200" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.disabled"
            type="text"
            @click="addDom(scope.$index)"
            >添加</el-button
          >
          <el-button
            v-else
            style="color: red"
            type="text"
            @click="removeDom(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagi.page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pagi.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totle"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    // 列表加载状态
    loadingDialig: {
      type: Boolean,
      default: false,
    },
    // 列表数组
    tableList: {
      type: Array,
      default: () => [],
    },
    // 列表总数量
    totle: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      isIndeterminate: false,
      checkAll: false,
      pagi: {
        page: 1,
        pageSize: 10,
      },
      // totle: 0,
      // 选中的数据列表
      rowActiveList: [],

      // 获取到当前展开行的index
      activeCurrentIndex: null,
      // 第二级
      secondsIsIndeterminate: false,
    };
  },
  watch: {
    tableList: {
      handler(val) {
        this.tableData = val;
        this.show = true;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getRowKeys(row) {
      return row.id;
    },
    // 多选商品
    handleSelectionChange(val) {
      this.isIndeterminate = !val;
      this.tableData.forEach((item) => {
        if (!item.disabled) item.check = val;
      });
      this.rowActiveList = this._.cloneDeep(this.tableData);
    },
    // 单选商品
    handRow(row, index, event) {
      row.spu_list.forEach((item) => {
        item.check = event;
      });
      // 获取当前列表长度
      let totalCount = this.tableData.length;
      // 定义当前列表中激活状态的数量
      let someStatusCount = 0;
      this.tableData.forEach((item) => {
        if (Array.isArray(item.spu_list)) {
          item.spu_list.forEach((lists) => {
            if (lists.check === true) {
              someStatusCount++;
            }
          });
        }
        // if (item.check === event) {
        //   someStatusCount++;
        // }
      });
      // 当点击勾选时,需将该条数据追加至rowActiveList列表中,反之则从rowActiveList找到该条数据进行剔除
      if (event) this.rowActiveList.push(row);
      else {
        let newIndex = this.rowActiveList.findIndex(
          (item) => item.id == row.id
        );
        this.rowActiveList.splice(newIndex, 1);
      }
      // 判断当前列表的总长度与激活状态的数量是否一致,一致则激活,反之则关闭
      this.checkAll = totalCount === someStatusCount ? !event : event;
      // 判断多选框是否处于中立状态
      this.isIndeterminate =
        someStatusCount > 0 && someStatusCount < totalCount;
    },
    // 模态框中点击添加
    addDom(index) {
      // 点击添加时,将该条数据的check状态和disabled状态进行变更
      let list = this.tableData[index];
      list.check = true;
      list.disabled = true;
      this.rowActiveList.push(list);
      // 将要添加的数据通过$emit("changeList")方法追加至list中
      this.$emit("changeList", list);
    },
    handleSizeChange(e) {
      this.pagi.pageSize = e;
      this.$emit("changeCurrent", e);
    },
    // 切换页数
    handleCurrentChange(e) {
      this.pagi.page = e;
      this.$emit("changeCurrent", e);
    },

    removeDom(index) {
      // 点击添加时,将该条数据的check状态和disabled状态进行变更
      let list = this.tableData[index];
      list.check = false;
      list.disabled = false;
      let newIndex = this.rowActiveList.findIndex((item) => item.id == list.id);
      this.rowActiveList.splice(newIndex, 1);
      // 将要添加的数据通过$emit("deleteList")方法从list中删除
      this.$emit("deleteList", list);
    },

    // 展开行时触发的函数
    changExpand(row) {
      this.activeCurrentIndex = this.tableData.findIndex(
        (item) => item.id == row.id
      );
      console.log(this.activeCurrentIndex);
    },
    handRow2(row, index, e) {
      row.check = e;
      let indes = this.tableData[this.activeCurrentIndex].spu_list.filter(
        (item) => {
          return item.check == e;
        }
      );
      if (
        indes.length == this.tableData[this.activeCurrentIndex].spu_list.length
      ) {
        this.tableData[this.activeCurrentIndex].secondsIsIndeterminate = false;
        this.tableData[this.activeCurrentIndex].check = true;
      } else if (indes.length == 0) {
        this.tableData[this.activeCurrentIndex].secondsIsIndeterminate = false;
        this.tableData[this.activeCurrentIndex].check = false;
      } else {
        this.tableData[this.activeCurrentIndex].secondsIsIndeterminate = true;
        this.tableData[this.activeCurrentIndex].check = false;
      }
      //
      let data = {
        name: this.tableData[this.activeCurrentIndex].name,
        id: this.tableData[this.activeCurrentIndex].id,
        caegory_id: this.tableData[this.activeCurrentIndex].caegory_id,
        spu_name: row.title,
        spu_unit: row.unit,
        market_price: row.market_price,
        purchase_price: row.purchase_price,
        goods_id: row.goods_id,
      };
      this.handRow(data, index, e);
    },
  },
};
</script>


<style lang='scss' scoped>
.contents {
  width: 100%;
  height: 100%;
}
</style>